<template>
    <div>图书列表</div>
    <ul class="booksList">
        <li v-for="item in booksListVal" :key="item.id">{{ item.bookname }}</li>
    </ul>
    <hr>
    <h3>单个id为5的图书</h3>
    <p>{{ bookVal.bookname }}</p>
</template>

<script setup lang='ts'>
import { onMounted, ref } from 'vue';
import type { Ref } from 'vue'
// 引入getAllBooksList方法
import { getAllBooksList, getBookById } from '../api/booksApi'
import type { AxiosResponse } from 'axios';
// 引入booksItemInterface 类别，单个图书的类型
import type { booksItemInterface } from '../models/booksModel'

// 状态变量--所有图书
let booksListVal: Ref<booksItemInterface[]> = ref([])

// 定义图书数据初始化方法
const booksListInit = () => {
    getAllBooksList('/books/queryall').then((res: AxiosResponse<booksItemInterface[]>) => {
        // console.log(res);  // AxiosResponse
        booksListVal.value = res.data
    })
}

// 状态变量 -- bookVal
const bookVal: Ref<booksItemInterface> = ref({
    auth: '',
    bookname: '',
    code: '',
    id: 0,
    imghref: '',
    isshelf: 0,
    price: 0,
    typeid: 0
})
// 根据id获取到的图书方法
const bookItem = (num: number) => {
    getBookById('/books/findbyid', { id: num }).then((res: AxiosResponse<booksItemInterface[]>) => {
        console.log(res)
        bookVal.value = res.data[0]
    })
}

onMounted(() => {
    booksListInit()
    bookItem(6)
})

</script>

<style></style>